<template>
	<view class="immediatePay">
		<headerTar title="立即支付" />
		<view class="top">
			<view class="t_money">
				<text>￥</text>{{payData.price}}
			</view>
			<view class="secure" v-if="payData.insurePrice=='0.09'">
				安心充电
			</view>
		</view>
		<view class="content">
			<view class="c_txt">
				选择支付方式
			</view>
			<view class="c_box">
				<view class="c_left"><u-icon class="weixin" name="weixin-circle-fill" size="50rpx"
						color="#01b168"></u-icon>
					<view class="c_left_txt1">微信支付</view>
				</view>
				<view class="c_right">
					<u-radio-group v-model="value" class="radio">
						<u-radio :name="0" active-color="#2fbc64"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="c_box">
				<view class="c_left"><u-icon class="weixin" name="red-packet-fill" size="50rpx"
						color="#01b168"></u-icon>
					<view class="c_left_txt1">余额(剩余￥{{moneyList.walletBalance}})</view>
				</view>
				<view class="c_right">
					<u-radio-group v-model="value" class="radio">
						<u-radio :name="1" active-color="#2fbc64"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="bottom">
				<view class="gopay" @click="gopay">
					立即支付
				</view>
			</view>
		</view>
		<view class="dialog" v-if="show"> </view>
		<view class="popup" v-if="show">
			<view class="p_top">提示</view>
			<view class="center">
				您的余额不足，是否前往充值？</view>
			<view class="btn">
				<view class="no" @click="go(1)">取消</view>
				<view class="yes" @click="go(2)">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		startChargeApi
	} from "@/api/pay.js";
	import {
		getUserInfoApi
	} from '@/api/my.js'
	import headerTar from '@/components/headerTar/header'
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				value: 2,
				show: false,
				qbvalue: 0,
				moneyList: '',
				payData: ''
			}
		},
		onLoad: async function(option) {
			//option为object类型，会序列化上个页面传递的参数
			console.log(JSON.parse(option.obj)); //打印出上个页面传递的参数。
			this.payData = JSON.parse(option.obj)
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				getUserInfoApi().then(res => {
					this.moneyList = res.data
				})
			},
			go(type) {
				//1 取消   2 确定
				this.show = false
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/recharge/recharge'
					});
				}
			},
			gopay() {
				console.log(this.value, '=========');
				if ((this.moneyList.walletBalance < this.payData.price) && this.value == 1) {
					this.show = true
				} else {
					this.payData.payType = this.value
					startChargeApi(
						this.payData
					).then(res => {
						if (res.code == 200) {
							if (this.value == 1) {
								//钱包支付
								if (res.code == 200) {
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/charging/charging",
										});
									}, 100)
								}
							} else {
								//微信支付
								wx.requestPayment({
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.packageVal,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success(res) {
										console.log(res);
										if (res.errMsg == "requestPayment:ok") {
											setTimeout(() => {
												uni.navigateTo({
													url: "/pages/charging/charging",
												});
											}, 0)
										}
									},
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.immediatePay {
		background-color: #f7f7f7;
		height: 100vh;

		.dialog {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			background-color: #666666;
			opacity: 0.9;
		}

		.popup {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 600rpx;
			padding: 40rpx 30rpx;
			margin-left: -300rpx;
			margin-top: -290rpx;
			box-sizing: border-box;
			overflow: hidden;
			background: #fff;
			border-radius: 12rpx;
			background-color: #fff;
			padding-bottom: 0rpx;
			opacity: 1;

			.p_top {
				margin: 30rpx 0;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.center {
				margin: 40rpx 0;
				text-align: center;
				font-size: 28rpx;
			}

			.btn {
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
				border-top: 2rpx solid #f1f1f1;
				display: flex;

				.yes,
				.no {
					flex: 1;
					text-align: center;
				}

				.yes {
					color: #30bf62;
				}
			}
		}

		.top {
			height: 280rpx;
			text-align: center;
			overflow: hidden;

			.t_money {
				margin-top: 90rpx;
				margin-bottom: 10rpx;
				font-size: 52rpx;
				font-weight: bold;

				text {
					font-weight: 300;
					font-size: 32rpx;
				}
			}

			.secure {
				width: 150rpx;
				margin: auto;
				padding: 4rpx 6rpx;
				font-size: 22rpx;
				border-radius: 16rpx;
				background: linear-gradient(to right, rgba(255, 232, 210, 0.5), rgba(255, 199, 145, 0.5));
				color: #bd5309;
			}
		}

		.content {
			height: 240rpx;
			// margin: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;

			.c_txt {
				margin: 20rpx 12rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.c_box {
				display: flex;
				flex-direction: row;
				padding: 5rpx 10rpx;
				font-size: 38rpx;


				.c_left {
					flex: 12;
					display: flex;
					line-height: 80rpx;
					overflow: hidden;

					.c_left_txt1 {
						font-size: 28rpx;
						margin-left: 15rpx;
					}
				}

				.c_right {
					flex: 1;
					font-size: 28rpx;
					display: flex;
					line-height: 80rpx;
					overflow: hidden;

					.c_left_txt2 {
						margin-right: 25rpx;
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;

			.gopay {
				margin: 30rpx;
				height: 100rpx;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 100rpx;
				border-radius: 60rpx;
				color: #fff;
				text-align: center;
				background-color: #30bf62;
			}
		}
	}
</style>